<template>
  <div class="box2">
    <h1>Footer{{count}}</h1>
    <ul class="list">
      <li v-for='item in name' :key='item.name'>{{item}}</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name:"Footer",
    mounted(){
      // console.log(this);
    },
    //因为{{this.$store.state.count}}太麻烦，而且获得一个值，和变化使用计算属性
    computed:{
      //vuex提供的方法  mapState() 一种数组写法，一种对象写法
      ...mapState(['count','name'])
    }
}
</script>

<style>
.box2{
    width: 100%;
    height: 150px;
    background-color: rgb(220, 175, 247);
    text-align: center;
    
}
.list{
list-style: none;
font-size:20px ;
}
</style>